<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="'作品《'+${WORK_NAME}+'》的评论'">评论</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" href="../../../static/back_css/public.css" th:href="@{/back_css/public.css}" media="all" />
    <link rel="stylesheet" href="../../../static/back_css/user_management.css" th:href="@{/back_css/user_management.css}" media="all">
    <link rel="stylesheet" href="../../../static/back_css/work_management.css"
          th:href="@{/back_css/work_management.css}" media="all">
</head>
<body>
<div class="container">
    <div class="container_top">
        <button style="margin-left:730px;width: 120px;height: 25px;" class="comment2">留言
        </button>
        <button style="width: 120px;height: 25px;" class="comment1">返回作品列表
        </button>
    </div>
    <div class="container_content">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <div class="container_content">
        <form class="layui-form">
            <table id="worksList" lay-even class="layui-table" lay-filter="worksList" lay-skin="nob"></table>
            <!--操作-->
            <script type="text/html" id="controls">
                <span>   <!--本区-->
                    {{#   if(d.level=="1"){                  }}
                    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">回复</a>
                    {{#  }                                           }}
                </span>
            </script>
            <input type="hidden" value="0" id="in">
        </form>
    </div>
</div>
<script type="text/html" id="pic_verify">
    <div class="works_vet">
        <form class="layui-form" action="" method="get">
            <div>
                <span>留言</span>
                <button class="close" type="button"><i class="layui-icon">&#x1006;</i></button>
            </div>
            <div class="layui-form-item ">
                <div class="layui-form-vet " id="vets_works_text">
                    <textarea placeholder="请输入内容" name="CONENT" class="layui-textarea"
                              style="height: 150px;"></textarea>
                </div>
                <div class="layui-form-close">
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius cancel">取消</button>
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius sure">确定</button>
                </div>
            </div>

        </form>
    </div>
</script>
<script type="text/html" id="video_verify">
    <div class="works_vet">
        <form class="layui-form" action="" method="get">
            <!-- 留言id -->
            <input type="hidden" name="ID" value="[id]">
            <input type="hidden" name="BE_USER_ID" value="[user_ID]">
            <div>
                <span>回复[nickname]：</span>
                <button class="close" type="button"><i class="layui-icon">&#x1006;</i></button>
            </div>
            <div class="layui-form-item ">
                <div class="layui-form-vet " id="vets_reply">
                    <textarea placeholder="请输入内容" name="CONENT" class="layui-textarea"
                              style="height: 150px;"></textarea>
                </div>
                <div class="layui-form-close">
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius cancel">取消</button>
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius rsure">确定</button>
                </div>
            </div>

        </form>
    </div>
</script>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        }

        table_render('/getBackComments');

        function table_render(url) {
            table.render({
                elem: '#test'
                , width: 1080
                , even: true
                , page: true
                , url: url
                , limit: 10
                , limits: [10,20,30,40,50]
                , id: 'idTest'
                , cols: [
                    [
                    {type: 'checkbox', fixed: 'left', style: 'display:none'},
                    {field: 'id', width: 70, title: '序号'},
                    {
                        field: 'head_IMG_URL',
                        unresize: true,
                        title: '留言者头像',
                        width: 100,
                        templet: function (d) {
                            return '<div><img style="width: 50px" src="' + d.head_IMG_URL + '"></div>';
                        }
                    },
                    {field: 'nickname',align: 'center', width: 120, title: '留言者/回复者'},
                    {
                        field: 'level',
                        title: '状态',
                        unresize: true,
                        align: 'center',
                        Width: 90,
                        templet: function (d) {
                            if(d.level == "1"){
                                return "留言";
                            }else if(d.level == "2"){
                                return "回复";
                            }
                        }
                    },
                    {field: 'be_NICKNAME',align: 'center', width: 120, title: '留言者/回复者'},
                    {field:'conent', title: '内容',width:480},
                    {title: '操作',unresize: true, width: 130, templet: '#controls', fixed: "right", align: "center"}
                ]
                ],
            });
        }

        //列表操作
        table.on('tool(test)', function (obj) {
            console.log(obj)
            var layEvent = obj.event,
                data = obj.data;

            if (layEvent === 'detail' ) { //编辑

                var source = $("#video_verify").html().replace(tplReg, function (node, key) {
                    console.log(key)
                    return obj.data[key];
                });
                $(document.body).append(source);
                form.render("radio");
            }
        });
        $(".comment1").click(function(){
            window.location.href = '/work';
        });
        $(".comment2").click(function(){
            var source = $("#pic_verify").html();
            $(document.body).append(source);
            form.render("radio");
        });
        $("body").on("click", "div.works_vet button.close", function (e) {
            $(this).parents("div.works_vet").remove();
            return false;
        });
        $("body").on("click", "div.works_vet button.cancel", function (e) {
            $(this).parents("div.works_vet").remove();
            return false;
        });
        $("body").on("click", "div.works_vet button.sure", function (e) {
            var obj = $(this).parents("form").serializeObject();
            var CONENT =  obj.CONENT;
            if(CONENT==null||CONENT==""){
                layer.msg("请输入留言内容！")
                return;
            }else if(CONENT.length>200){
                layer.msg("最多写入200个字符")
                return;
            }else{
                $.ajax({//进行后台留言
                    url: '/setCommentBack',
                    async: false,
                    type: "POST",
                    data: {
                        CONENT: CONENT
                    },
                    success: function (data) {
                        if (data==1) {
                            layer.msg("留言成功！")
                        }else{
                            layer.msg("留言失败！")
                        }

                        table_render('/getBackComments');
                    }
                });
            }
            $(this).parents("div.works_vet").remove();
            return false;
        });
        $("body").on("click", "div.works_vet button.rsure", function (e) {
            var obj = $(this).parents("form").serializeObject();
            var CONENT =  obj.CONENT;
            if(CONENT==null||CONENT==""){
                layer.msg("请输入回复内容！")
                return;
            }else if(CONENT.length>200){
                layer.msg("最多写入200个字符")
                return;
            }else{
                $.ajax({//进行后台留言
                    url: '/setReplyBack',
                    async: false,
                    type: "POST",
                    data: {
                        CONENT: CONENT,
                        ID:obj.ID,
                        BE_USER_ID:obj.BE_USER_ID
                    },
                    success: function (data) {
                        if (data==1) {
                            layer.msg("回复成功！")
                        }else{
                            layer.msg("回复失败！")
                        }
                        table_render('/getBackComments');
                    }
                });
            }
            $(this).parents("div.works_vet").remove();
            return false;
        });
    });
    window.tplReg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。

    window.IsArray = function (v) {
        return Object.prototype.toString.call(v) == '[object Array]';
    }
    window.IsObject = function (v) {
        return Object.prototype.toString.call(v) == '[object Object]';
    }

    window.getLowerCaseKeyJsonByRecursive = function (obj) {
        var ret = {}//转成对象 进行属性名小写化
        if (window.IsArray(obj)) {
            ret = [];
            for (var i = 0; i < obj.length; i++) {
                //此方法一定可以完成 这个功能 传入一个大写KEY 导出一个小写KEY
                var tmp_obj = window.getLowerCaseKeyJsonByRecursive(obj[i])
                ret.push(tmp_obj);
            }
            return ret;
        } else if (window.IsObject(obj)) {
            ret = {};
            for (var key in obj) {
                //普通字符串
                ret[key.toLowerCase()] = window.getLowerCaseKeyJsonByRecursive(obj[key]);
            }
            return ret;
        } else {
            return obj;
        }
    };
</script>
</body>
</html>